<!DOCTYPE html>
<html lang="en" xmlns:th="http://www.thymeleaf.org">
<head>
    <meta charset="UTF-8">
    <title>订单列表</title>
    <meta name="renderer" content="webkit">
    <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
    <meta name="viewport"
          content="width=device-width, initial-scale=1.0, minimum-scale=1.0, maximum-scale=1.0, user-scalable=0">
    <link rel="stylesheet" th:href="@{/js/layui/css/layui.css}">
</head>
<body class="layui-layout-body">
<div class="layui-layout layui-layout-admin layui-col-xs12 layui-col-sm12 layui-col-md12">
    <!-- 顶部菜单 -->
    <div class="layui-header">
        <div class="layui-logo">
            <a th:href="@{/}" style="color: #009688;font-weight: bold;">layui 后台布局</a>
        </div>
        <!-- 头部区域（可配合layui已有的水平导航） -->
        <ul class="layui-nav layui-layout-left layui-nav-itemed">
            <li class="layui-nav-item"><a th:href="@{/}">首页</a></li>
            <li class="layui-nav-item layui-this">
                <a href="javascript:;">易收系统</a>
            </li>
        </ul>
    </div>
    <!-- 侧边菜单 -->
    <div class="layui-side layui-bg-black">
        <div class="layui-side-scroll">
            <ul class="layui-nav layui-nav-tree" lay-filter="">
                <li class="layui-nav-item layui-nav-itemed">
                    <a class="" href="javascript:;">易收系统</a>
                    <dl class="layui-nav-child">
                        <dd><a th:href="@{/system/community/toCommunityList}">小区管理</a></dd>
                        <dd><a th:href="@{/system/building/toBuildingList}">楼栋管理</a></dd>
                        <dd><a th:href="@{/system/user/toUserList}">已入驻业主管理</a></dd>
                        <dd><a th:href="@{/system/owner/toOwnerList}">未入驻业主管理</a></dd>
                        <dd class="layui-this"><a href="#">订单管理</a></dd>
                        <dd><a th:href="@{/system/employee/toEmployeeList}">员工管理</a></dd>
                    </dl>
                </li>
            </ul>
        </div>
    </div>

    <!-- 主体内容 -->
    <div class="layui-body" style="margin-left: 30px;margin-right: 30px;">
        <!-- 订单列表 -->
        <div style="margin-top: 20px;margin-bottom: 10px;">
            <h1 align="center" style="font-weight: bold;">订单列表</h1>
        </div>

        <!-- 查询框开始 -->
        <div style="margin-right: 20px;margin-top: 20px;">
            <form class="layui-form">
                <!-- 订单编号 -->
                <div class="layui-input-inline" style="margin-left: 20px;">
                    <input type="text" name="orderId" id="orderId" placeholder="请输入订单编号" autocomplete="off"
                           class="layui-input">
                </div>
                <!-- 订单流水号 -->
                <div class="layui-input-inline" style="margin-left: 10px;">
                    <input type="text" name="orderNum" id="orderNum" placeholder="请输入订单流水号" autocomplete="off"
                           class="layui-input">
                </div>
                <!-- 开始时间 -->
                <div class="layui-input-inline" style="margin-left: 10px;">
                    <input type="text" name="startDate" id="startDate" placeholder="请选择查询开始日期" autocomplete="off"
                           class="layui-input">
                </div>
                <!-- 结束时间 -->
                <div class="layui-input-inline" style="margin-left: 10px;margin-right: 10px;">
                    <input type="text" name="endDate" id="endDate" placeholder="请选择查询结束日期" autocomplete="off"
                           class="layui-input">
                </div>
                <!-- 查询和添加按钮 -->
                <a class="layui-btn layui-btn-sm" lay-submit="" lay-filter="doSearch">查询</a>
                <button type="reset" class="layui-btn layui-btn-primary layui-btn-sm">重置</button>
                <a style="float: right;" class="layui-btn layui-btn-sm" id="doAdd">添加</a>
            </form>
        </div>
        <!-- 查询框结束 -->

        <!-- 表格框开始 -->
        <div style="margin-top: 20px;">
            <table class="layui-hide" id="orders" lay-filter="orderTable"></table>
            <div id="barDemo" style="display: none;">
                <a class="layui-btn layui-btn-xs" lay-event="detailOrderById">详情</a>
                <a class="layui-btn layui-btn-xs" lay-event="editOrderById">编辑</a>
                <a class="layui-btn layui-btn-danger layui-btn-xs" lay-event="deleteOrderById">删除</a>
            </div>
        </div>
        <!-- 表格框结束 -->

        <!-- 添加订单的弹出层 -->
        <div id="addOrderDiv" style="display: none;padding: 40px;">
            <form class="layui-form layui-form-pane" style="margin:20px;">
                <!--订单预约时间和上门回收时间-->
                <div class="layui-form-item">
                    <div class="layui-inline">
                        <label class="layui-form-label">预约时间</label>
                        <div class="layui-input-inline">
                            <input type="text" name="appointmentTime" id="a_appointmentTime" lay-verify="required"
                                   placeholder="预约上门时间" autocomplete="off" class="layui-input">
                        </div>
                    </div>
                    <div class="layui-inline" style="margin-left: 20px;">
                        <label class="layui-form-label">上门时间</label>
                        <div class="layui-input-inline">
                            <input type="text" name="collectionTime" id="a_collectionTime" lay-verify="required"
                                   placeholder="上门回收时间" autocomplete="off" class="layui-input">
                        </div>
                    </div>
                </div>
                <!--订单状态和盘点方式-->
                <div class="layui-form-item">
                    <div class="layui-inline">
                        <label class="layui-form-label">订单状态</label>
                        <div class="layui-input-inline">
                            <select name="orderStatic" id="a_orderStatic">
                                <option value="1" selected="">待上门</option>
                                <option value="2">已完成</option>
                            </select>
                        </div>
                    </div>
                    <div class="layui-inline" style="margin-left: 20px;">
                        <label class="layui-form-label">盘点方式</label>
                        <div class="layui-input-inline">
                            <select name="checkMethod" id="a_checkMethod">
                                <option value="1" selected="">公司分拣</option>
                                <option value="2">自己分拣</option>
                            </select>
                        </div>
                    </div>
                </div>
                <!--是否有额外垃圾和绑定所属业主ID-->
                <div class="layui-form-item">
                    <div class="layui-inline">
                        <label class="layui-form-label">额外垃圾</label>
                        <div class="layui-input-inline">
                            <select name="extraRubbish" id="a_extraRubbish">
                                <option value="1" selected="">无</option>
                                <option value="2">有</option>
                                <option value="3">很多</option>
                            </select>
                        </div>
                    </div>
                    <div class="layui-inline" style="margin-left: 20px;">
                        <label class="layui-form-label">业主ID</label>
                        <div class="layui-input-inline">
                            <input type="text" name="userId" id="a_userId" lay-verify="required|number"
                                   placeholder="绑定所属业主ID" autocomplete="off" class="layui-input">
                        </div>
                    </div>
                </div>
                <!--员工ID-->
                <div class="layui-form-item">
                    <div class="layui-inline">
                        <label class="layui-form-label">员工ID</label>
                        <div class="layui-input-inline">
                            <input type="text" name="empId" id="a_empId" lay-verify="required|number"
                                   placeholder="绑定所属业主ID" autocomplete="off" class="layui-input">
                        </div>
                    </div>
                </div>
                <!--订单备注-->
                <div class="layui-form-item layui-form-text">
                    <label class="layui-form-label">订单备注</label>
                    <div class="layui-input-block">
                        <textarea name="orderRemark" placeholder="请输入账单备注" class="layui-textarea"></textarea>
                    </div>
                </div>
                <!-- 提交和重置按钮 -->
                <div class="layui-form-item" style="margin-top:20px;margin-left:180px;">
                    <div class="layui-input-block">
                        <button type="button" class="layui-btn layui-btn-sm" lay-submit="" lay-filter="doSubmit">提交
                        </button>
                        <button type="reset" id="reloadFrame" class="layui-btn layui-btn-sm layui-btn-primary">重置
                        </button>
                    </div>
                </div>
            </form>
        </div>
        <!-- 添加订单的弹出层结束 -->

        <!-- 修改订单的弹出层 -->
        <div id="editOrderDiv" style="display: none;padding: 20px;">
            <form class="layui-form layui-form-pane" style="margin:20px;" lay-filter="formData">
                <!-- 订单的id值,需要隐藏起来 -->
                <input type="hidden" name="orderId" id="e_orderId" lay-verify="required" autocomplete="off">
                <!--订单的上门回收时间-->
                <div class="layui-form-item">
                    <div class="layui-inline">
                        <label class="layui-form-label">上门时间</label>
                        <div class="layui-input-inline">
                            <input type="text" name="collectionTime" id="e_collectionTime" lay-verify="required"
                                   placeholder="上门回收时间" autocomplete="off" class="layui-input">
                        </div>
                    </div>
                    <div class="layui-inline" style="margin-left: 30px;">
                        <label class="layui-form-label">订单状态</label>
                        <div class="layui-input-inline">
                            <select name="orderStatic" id="e_orderStatic">
                                <option value="1" selected="">待上门</option>
                                <option value="2">已完成</option>
                            </select>
                        </div>
                    </div>
                </div>
                <!--订单状态和盘点方式-->
                <div class="layui-form-item">
                    <div class="layui-inline">
                        <label class="layui-form-label">盘点方式</label>
                        <div class="layui-input-inline">
                            <select name="checkMethod" id="e_checkMethod">
                                <option value="1" selected="">公司分拣</option>
                                <option value="2">自己分拣</option>
                            </select>
                        </div>
                    </div>
                    <div class="layui-inline" style="margin-left: 30px;">
                        <label class="layui-form-label">额外垃圾</label>
                        <div class="layui-input-inline">
                            <select name="extraRubbish" id="e_extraRubbish">
                                <option value="1" selected="">无</option>
                                <option value="2">有</option>
                                <option value="3">很多</option>
                            </select>
                        </div>
                    </div>
                </div>
                <!--订单备注-->
                <div class="layui-form-item layui-form-text">
                    <label class="layui-form-label">订单备注</label>
                    <div class="layui-input-block">
                        <textarea name="orderRemark" placeholder="请输入账单备注" class="layui-textarea"></textarea>
                    </div>
                </div>
                <!-- 修改和重置按钮 -->
                <div class="layui-form-item" style="margin-top: 20px;margin-left: 180px;">
                    <div class="layui-input-block">
                        <button type="button" class="layui-btn layui-btn-sm" lay-submit="" lay-filter="editSubmit">修改
                        </button>
                        <button type="reset" id="reloadMessage" class="layui-btn layui-btn-sm layui-btn-primary">重置
                        </button>
                    </div>
                </div>
            </form>
        </div>
        <!--修改订单的弹出层结束 -->
        <!-- 主体内容结束 -->
    </div>
</div>

<!-- 用户列表结束 -->
<!-- 以下是layui函数代码块 -->
<script type="application/javascript" th:src="@{/js/layui/layui.js}"></script>
<!-- 导入用户列表的js文件 -->
<script type="application/javascript" th:src="@{/js/layui/sys_order.js}"></script>
</body>
</html>